<style lang="stylus" type="text/stylus">
@import './releasePolicy.styl';

.sumIndexMain {
  height: 100%;

  .sumIndex-Title {
    font-size: 14px;
    color: #bbb;
  }

  .sumIndex-RichText {
    width: 100%;
    height: calc(100% - 88px);
    background-color: #fff;

    .editor-layer {
      position: relative;
      width: 100%;
      height: 100%;

      .editor {
        position: relative;
        height: 100%;

        .btn-editor {
          position: absolute;
          right: -60px;
          top: 0;
          width: 60px;
          text-align: center;

          .close-editor {
            font-size: 40px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .sumIndex-floor {
    position: absolute;
    bottom: 0;
    width: calc(100% - 30px);
    height: 40px;
    background-color: #222;

    .publish, .backout {
      float: right;
      font-size: 16px;
      width: 130px;
      height: 40px;
      cursor: pointer;
      color: #fff;
      background-color: #999;
      border: 1px solid #000;

      &:hover {
        background-color: skyblue;
      }
    }

    .publishColor, .backoutColor {
      background-color: skyblue;
    }
  }
}

#releasePolicy {
  .publishModel {
    margin-bottom: 8px;

    .ivu-cascader-rel {
      width: 50%;
    }

    .cascader-multi .ivu-cascader-menu {
      height: 180px;
    }
  }
}
</style>

<template>
  <div id="releasePolicy">
    <div class="sidebarLeft">
      <div class="shrinkBtn">
        <Icon type="ios-arrow-left"></Icon>
      </div>
      <div
        class="addPolicyBtn"
        @click="editPolicy()"
      >撰写一个新政策</div>
      <div
        class="sumIndexNav"
        :class="{ sumIndexColor:issumIndexColor }"
        @click='sumIndex()'
      >总索引页</div>
      <VuePerfectScrollbar class="sidebarLeftScroll">
        <ul class="policyDrafts">
          <span class="policyDraftsTitle">草稿</span>
          <textarea
            v-if="isShowEditList"
            class="addPolicyList"
            :value="newPolicyInfoTitle"
            placeholder="请填写政策标题"
          ></textarea>
          <li
            :class='{"active":classId==policyDraft.id&&!isShowEditList}'
            @click="chooseTargetPolicy(policyDraft.id)"
            v-for="policyDraft in policyDraftList"
            :key="policyDraft.id"
          >{{policyDraft.shortTitle}}
          </li>
        </ul>
        <ul class="policyRecycle">
          <span>回收站</span>
          <li
            :class='{"active":classId==policyRecycle.id&&!isShowEditList}'
            @click="chooseTargetPolicy(policyRecycle.id)"
            v-for="policyRecycle in policyRecycleList"
            :key="policyRecycle.id"
          >{{policyRecycle.shortTitle}}
          </li>
        </ul>
      </VuePerfectScrollbar>

    </div>

    <div class="releasePolicyContent">

      <!-- 总索引页的内容 -->
      <div
        v-if="switchover"
        class="sumIndexMain"
      >
        <div class="sumIndex-Title">正文</div>
        <!-- 富文本部分 -->
        <div class="sumIndex-RichText">
          <div class="editor-layer">
            <div class="editor">
              <quillEditor
                id="quillEditor"
                v-model="sumIndexRichText"
                :options="editorOption"
              >
                <div
                  id="toolbar"
                  slot="toolbar"
                >
                  <!-- Add font size dropdown -->
                  <select class="ql-header">
                    <option value="1">H1</option>
                    <option value="2">H2</option>
                    <option value="3">H3</option>
                    <option value="4">H4</option>
                    <option value="5">H5</option>
                    <option value="6">H6</option>
                  </select>

                  <!-- Add a bold button -->
                  <button class="ql-bold"></button>
                  <button class="ql-italic"></button>
                  <button class="ql-underline"></button>
                  <button class="ql-strike"></button>

                  <button
                    class="ql-list"
                    value="ordered"
                  ></button>
                  <button
                    class="ql-list"
                    value="bullet"
                  ></button>

                  <button
                    class="ql-indent"
                    value="-1"
                  ></button>
                  <button
                    class="ql-indent"
                    value="+1"
                  ></button>

                  <!-- Add subscript and superscript buttons -->
                  <button
                    class="ql-script"
                    value="sub"
                  ></button>
                  <button
                    class="ql-script"
                    value="super"
                  ></button>

                  <button class="ql-image">Image</button>

                </div>
              </quillEditor>
            </div>

          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="sumIndex-floor">
          <button
            class="publish"
            :class="{ publishColor:ispublish }"
            @click='publishText()'
            :disabled="ifClickPublish"
          >
            发布改动
          </button>
          <button
            class="backout"
            :class="{ backoutColor:isbackout }"
            @click='backoutText()'
          >撤销改动</button>
        </div>
      </div>
      <!-- 分支点 -->
      <div
        v-else
        class="releasePolicyContentMain clearfix"
      >
        <div
          v-if="isShowEditList"
          class="policyContentTop"
        >
          <div class="policyContentTopLeft">
            <div class="editContentHeader">正文</div>
            <div class="editContentTitle">
              <input
                class="policyCaption"
                ref="shortTitleInfo"
                type="text"
                v-model="newPolicyInfoTitle"
                placeholder="请输入政策标题"
                value=""
              >
              <!-- <input class="policyDescription" ref="longTitleInfo" type="text" placeholder="请输入政策描述" value=""> -->
              <Input
                type="textarea"
                class="policyDescription"
                v-model="policyLongTitle"
                :autosize="{minRows: .8,maxRows: 10}"
                placeholder="请输入政策描述"
              ></Input>
            </div>

            <!-- 选择负责人(编写后保存) -->
            <!-- <div class="publishModel" v-if="_SERVER==123 || _SERVER==203"> -->
            <!-- <p>选择政策相对应科室及相关人员</p> -->
            <!-- <cascaderMulti @on-change="publishData" clearable :data="Publisher" placeholder='请选择科室及相关人员'></cascaderMulti>
            </div> -->

            <div class="editPolicyContent">
              <div class="editor-layer">
                <div class="editor">
                  <quillEditor
                    id="quillEditor"
                    v-model="editorContent"
                    :options="editorOption"
                  >
                    <div
                      id="toolbar"
                      slot="toolbar"
                    >
                      <!-- Add font size dropdown -->
                      <select class="ql-header">
                        <option value="1">H1</option>
                        <option value="2">H2</option>
                        <option value="3">H3</option>
                        <option value="4">H4</option>
                        <option value="5">H5</option>
                        <option value="6">H6</option>
                      </select>

                      <!-- Add a bold button -->
                      <button class="ql-bold"></button>
                      <button class="ql-italic"></button>
                      <button class="ql-underline"></button>
                      <button class="ql-strike"></button>

                      <button
                        class="ql-list"
                        value="ordered"
                      ></button>
                      <button
                        class="ql-list"
                        value="bullet"
                      ></button>

                      <button
                        class="ql-indent"
                        value="-1"
                      ></button>
                      <button
                        class="ql-indent"
                        value="+1"
                      ></button>

                      <!-- Add subscript and superscript buttons -->
                      <button
                        class="ql-script"
                        value="sub"
                      ></button>
                      <button
                        class="ql-script"
                        value="super"
                      ></button>

                      <button class="ql-image">Image</button>

                    </div>
                  </quillEditor>
                </div>

              </div>
            </div>
          </div>
          <div class="policyContentTopRight">
            <div class="matingContentHeader">配套内容</div>
            <VuePerfectScrollbar class="policyContentTopRightScroll">
              <div class="extrude">
                <span class="extrudeCaption">立体化</span>
                <div class="policySpiritDescription">
                  <p>政策精神</p>
                  <!-- <div ref="spiritInfo" class="textarea" contenteditable="true">
                    <span class="placeholder" v-if="!targetPolicyInfo.spirit">请输入政策精神</span>
                    {{targetPolicyInfo.spirit}}
                  </div> -->
                  <Input
                    type="textarea"
                    v-model="policySpirit"
                    :autosize="{minRows: 1,maxRows: 10}"
                    :value="targetPolicyInfo.spirit"
                    placeholder="请输入政策精神"
                  ></Input>
                </div>
                <div class="uploadPicture">
                  <p>政策配图（入口图片）</p>
                  <!--<span>上传图片</span>-->
                  <Upload
                    v-show="isShowBtn"
                    :action="_URL_v2 + '/filecommon/uploadFile?moduleName=help&userId=fcadmin&pwd='+getToken"
                    :on-success="handleSuccess"
                    :show-upload-list="false"
                    :default-file-list="defaultList"
                  >
                    <Button type="info">上传图片</Button>
                  </Upload>
                  <div
                    v-if="isShowPic"
                    class="showPic"
                  >
                    <img
                      :src="picUrl"
                      alt=""
                    >
                    <div
                      @click="deletePic(picUrl)"
                      class="delPic"
                    >
                      <Icon type="ios-trash-outline"></Icon>
                    </div>
                  </div>
                </div>
              </div>
              <div class="declareFunding">
                <span>可申报资助</span>
                <div
                  v-for="(funding,fundingIndex) in prizesObj"
                  :key="fundingIndex"
                  class="fundingList clearfix"
                >
                  <div class="fundingListLeft">
                    <!-- <ButtonGroup vertical>
                      <Button icon="arrow-up-b" size="small"></Button>
                      <Button icon="arrow-down-b" size="small"></Button>
                    </ButtonGroup> -->
                    <div class="upDown">
                      <span class="up">
                        <Icon type="ios-arrow-up"></Icon>
                      </span>
                      <span class="down">
                        <Icon type="ios-arrow-down"></Icon>
                      </span>
                    </div>
                    <Poptip
                      confirm
                      title="您确认删除这条内容吗？"
                      @on-ok="ok(fundingIndex)"
                      @on-cancel="cancel"
                      placement="right"
                      size="small"
                    >
                      <span>
                        <Icon type="ios-close-empty"></Icon>
                      </span>
                    </Poptip>
                  </div>
                  <div class="fundingListRight">
                    <p class="fundingTitle">资助{{fundingIndex + 1}}</p>
                    <!-- <textarea class="fundingName" ref="fundingTitleInfo" v-model="funding.title" placeholder="请填写资助名称"></textarea> -->
                    <Input
                      type="textarea"
                      class="fundingName"
                      ref="fundingTitleInfo"
                      :autosize="{minRows: 1,maxRows: 10}"
                      :value="funding.title"
                      placeholder="请填写资助名称"
                    ></Input>
                    <!--<p class="fundingName">资助名称资助名称</p>-->
                    <div class="fundingType">
                      <span class="typeName">资助类型</span>
                      <span
                        v-show="funding.maxPrize == '' || funding.maxPrize == null"
                        class="fundingType01"
                      >未选择资助类型</span>
                      <span
                        v-show="funding.maxPrize != ''"
                        class="fundingType01"
                      >{{funding.maxPrize | getStr}}</span>
                    </div>
                    <div class="fundingType">
                      <span class="typeName">资助最大参考值</span>
                      <input
                        ref="maxPrizeInfo"
                        class="fundingType02"
                        type="text"
                        v-model="funding.maxPrize"
                        placeholder="最大资助"
                      >
                      <!-- <span v-show="funding.maxPrize != ''" class="fundingType03">{{funding.maxPrize | getStr}}</span> -->
                    </div>
                    <div class="fundingDescription">
                      <!-- <textarea ref="fundingDescriptionInfo" v-model="funding.description" placeholder="请填写资助具体描述"></textarea> -->
                      <Input
                        type="textarea"
                        ref="fundingDescriptionInfo"
                        :autosize="{minRows: 1,maxRows: 10}"
                        :value="funding.description"
                        placeholder="请填写资助具体描述"
                      ></Input>
                    </div>
                  </div>
                </div>
                <div
                  class="addFundingBtn"
                  @click="addFunding()"
                >
                  <Icon type="ios-plus-empty"></Icon>
                </div>
                <Modal
                  title="请编辑资助的资助类型"
                  v-model="modal10"
                  @on-ok="ok01"
                  @on-cancel="cancel01"
                  class-name="vertical-center-modal"
                >
                  <div class="modalTop">
                    <p class="modalTopTitle">
                      请输入资助后缀
                    </p>
                    <input
                      ref="prizeTypeInfo"
                      class="modalTopContent"
                      type="text"
                      placeholder="点击开始编辑"
                    >
                  </div>
                </Modal>
              </div>
              <div class="applicationForm">
                <p>申报材料1：在线申请表</p>
                <div class="applicationFormContent">
                  <div class="applicationFormContentStatus">
                    <span class="formTop">在线申请表</span>
                    <!--<span class="formBottom">已录入12个组件</span>-->
                  </div>
                  <div class="editFormBtn">
                    <a
                      :href="componentUrl"
                      target="_blank"
                    >编辑在线申请表</a>
                  </div>
                </div>
              </div>
              <div class="applicationForm">
                <p>申报材料2：PDF材料</p>
                <div class="applicationFormContent">
                  <div class="applicationFormContentStatus">
                    <span class="formTop">PDF清单</span>
                    <!--<span class="formBottom">已录入25项PDF材料清单</span>-->
                  </div>
                  <div class="editFormBtn">
                    <a
                      :href="componentUrl"
                      target="_blank"
                    >编辑PDF材料清单</a>
                  </div>
                </div>
              </div>
            </VuePerfectScrollbar>

          </div>
        </div>
        <div
          v-if="isShowPolicyList"
          class="policyContentTop"
        >
          <div class="policyContentTopLeft">
            <div class="editContentHeader">正文</div>
            <div class="editContentTitle">
              <input
                class="policyCaption"
                ref="shortTitleInfo"
                type="text"
                v-model="targetPolicyInfo.shortTitle"
                placeholder="请输入政策标题"
                value=""
              >
              <!-- <input class="policyDescription" ref="longTitleInfo" type="text" placeholder="请输入政策描述" :value="targetPolicyInfo.longTitle"> -->
              <Input
                type="textarea"
                ref="longTitleInfo"
                class="policyDescription"
                v-model="targetPolicyInfo.longTitle"
                :autosize="{minRows: .8,maxRows: 10}"
                placeholder="请输入政策描述"
              ></Input>
            </div>

            <!-- 选择负责人(修改) -->
            <!-- <div class="publishModel" v-if="_SERVER==123 || _SERVER==203">
              <cascaderMulti @on-change="publishData" :data="Publisher" :placeholder="displayOffic"></cascaderMulti>
            </div> -->

            <div class="editPolicyContent">
              <div class="editor-layer">
                <div class="editor">
                  <quillEditor
                    id="quillEditor"
                    v-model="editorContent"
                    :options="editorOption"
                  >
                    <div
                      id="toolbar"
                      slot="toolbar"
                    >
                      <!-- Add font size dropdown -->
                      <select class="ql-header">
                        <option value="1">H1</option>
                        <option value="2">H2</option>
                        <option value="3">H3</option>
                        <option value="4">H4</option>
                        <option value="5">H5</option>
                        <option value="6">H6</option>
                      </select>

                      <!-- Add a bold button -->
                      <button class="ql-bold"></button>
                      <button class="ql-italic"></button>
                      <button class="ql-underline"></button>
                      <button class="ql-strike"></button>

                      <button
                        class="ql-list"
                        value="ordered"
                      ></button>
                      <button
                        class="ql-list"
                        value="bullet"
                      ></button>

                      <button
                        class="ql-indent"
                        value="-1"
                      ></button>
                      <button
                        class="ql-indent"
                        value="+1"
                      ></button>

                      <!-- Add subscript and superscript buttons -->
                      <button
                        class="ql-script"
                        value="sub"
                      ></button>
                      <button
                        class="ql-script"
                        value="super"
                      ></button>

                      <button class="ql-image">Image</button>

                    </div>
                  </quillEditor>
                </div>
              </div>
            </div>

            <!--<div class="editPolicyContent">-->
            <!--{{targetPolicyInfo.summary}}-->
            <!--</div>-->
          </div>
          <div class="policyContentTopRight">
            <div class="matingContentHeader">配套内容</div>
            <VuePerfectScrollbar class="policyContentTopRightScroll">
              <div class="extrude">
                <span class="extrudeCaption">立体化</span>
                <div class="policySpiritDescription">
                  <p>政策精神</p>
                  <!-- <textarea ref="spiritInfo" placeholder="请填写政策精神正文">
                    {{targetPolicyInfo.spirit}}
                  </textarea> -->
                  <!-- <div ref="spiritInfo" aria-placeholder="请输入政策精神" class="textarea" contenteditable="true">
                    <span class="placeholder" v-if="!targetPolicyInfo.spirit">请输入政策精神</span>
                    {{targetPolicyInfo.spirit}}
                  </div> -->
                  <Input
                    type="textarea"
                    ref="spiritInfo"
                    :autosize="{minRows: 1,maxRows: 10}"
                    v-model="targetPolicyInfo.spirit"
                    placeholder="请输入政策精神"
                  ></Input>
                </div>
                <div class="uploadPicture">
                  <p>政策配图（入口图片）</p>
                  <Upload
                    v-if="!picUrl"
                    :action="_URL_v2 + '/filecommon/uploadFile?moduleName=help&userId=fcadmin&pwd='+ getToken"
                    :on-success="handleSuccess"
                    :show-upload-list="false"
                    :default-file-list="defaultList"
                  >
                    <Button type="info">上传图片</Button>
                  </Upload>
                  <div
                    v-if="picUrl"
                    class="showPic"
                  >
                    <img
                      :src="picUrl"
                      alt=""
                    >
                    <div
                      @click="deletePic(picUrl)"
                      class="delPic"
                    >
                      <Icon type="ios-trash-outline"></Icon>
                    </div>
                  </div>
                </div>
              </div>
              <div class="declareFunding">
                <span>可申报资助</span>
                <div
                  v-for="(funding,fundingIndex) in prizesObj"
                  :key="fundingIndex"
                  class="fundingList clearfix"
                >
                  <div class="fundingListLeft">
                    <div class="upDown">
                      <span class="up">
                        <Icon type="ios-arrow-up"></Icon>
                      </span>
                      <span class="down">
                        <Icon type="ios-arrow-down"></Icon>
                      </span>
                    </div>
                    <Poptip
                      confirm
                      title="您确认删除这条内容吗？"
                      @on-ok="ok(fundingIndex)"
                      @on-cancel="cancel"
                      placement="right"
                      size="small"
                    >
                      <span class="delBtn">
                        <Icon type="ios-close-empty"></Icon>
                      </span>
                    </Poptip>
                  </div>
                  <div class="fundingListRight">
                    <p class="fundingTitle">资助{{fundingIndex + 1}}</p>
                    <!-- <input class="fundingName" ref="fundingTitleInfo" :value="funding.title" placeholder="请填写资助名称"> -->
                    <Input
                      type="textarea"
                      :autosize="{minRows: 1,maxRows: 10}"
                      v-model="funding.title"
                      placeholder="请填写资助名称"
                    ></Input>
                    <!--<p class="fundingName">资助名称资助名称</p>-->
                    <div class="fundingType">
                      <span class="typeName">资助类型</span>
                      <span
                        v-show="funding.maxPrize == '' || funding.maxPrize == null"
                        class="fundingType01"
                      >未选择资助类型</span>
                      <span
                        v-show="funding.maxPrize != ''"
                        class="fundingType01"
                      >{{funding.maxPrize | getStr}}</span>
                    </div>
                    <div class="fundingType">
                      <span class="typeName">资助最大参考值</span>
                      <input
                        ref="maxPrizeInfo"
                        class="fundingType02"
                        type="text"
                        v-model="funding.maxPrize"
                        placeholder="最大资助"
                      >
                      <!-- <span v-show="funding.maxPrize != ''" class="fundingType03">{{funding.maxPrize | getStr}}</span> -->
                    </div>
                    <div class="fundingDescription">
                      <!-- <textarea ref="fundingDescriptionInfo" :value="funding.description" placeholder="请填写资助具体描述" @change="autoTextarea(123)"></textarea> -->
                      <Input
                        type="textarea"
                        :autosize="{minRows: 1,maxRows: 10}"
                        v-model="funding.description"
                        placeholder="请填写资助具体描述"
                      ></Input>
                    </div>
                  </div>
                </div>
                <div
                  class="addFundingBtn"
                  @click="addFunding()"
                >
                  <Icon type="ios-plus-empty"></Icon>
                </div>
                <Modal
                  title="请编辑资助的资助类型"
                  v-model="modal10"
                  @on-ok="ok01"
                  @on-cancel="cancel01"
                  class-name="vertical-center-modal"
                >
                  <div class="modalTop">
                    <p class="modalTopTitle">
                      请输入资助后缀
                    </p>
                    <Input
                      ref="prizeTypeInfo"
                      type="textarea"
                      class="modalTopContent"
                      :autosize="true"
                      v-model="prizeType"
                      placeholder="点击开始编辑"
                    ></Input>
                  </div>
                </Modal>
              </div>
              <div class="applicationForm">
                <p>申报材料1：在线申请表</p>
                <div class="applicationFormContent">
                  <div class="applicationFormContentStatus">
                    <span class="formTop">在线申请表</span>
                    <!--<span class="formBottom">已录入12个组件</span>-->
                  </div>
                  <div class="editFormBtn">
                    <a
                      :href="componentUrl"
                      target="_blank"
                    >编辑在线申请表</a>
                  </div>
                </div>
              </div>
              <div class="applicationForm">
                <p>申报材料2：PDF材料</p>
                <div class="applicationFormContent">
                  <div class="applicationFormContentStatus">
                    <span class="formTop">PDF清单</span>
                    <!--<span class="formBottom">已录入25项PDF材料清单</span>-->
                  </div>
                  <div class="editFormBtn">
                    <a
                      :href="componentUrl"
                      target="_blank"
                    >编辑PDF材料清单</a>
                  </div>
                </div>
              </div>
            </VuePerfectScrollbar>

          </div>
        </div>

        <div class="policyContentFooter">
          <div
            class="deleteBtn"
            @click="deleteDraft"
          >删除</div>
          <div class="operationBtn">
            <div
              class="savePolicyBtn"
              @click="saveEditorContent"
            >保存正文草稿</div>
            <div
              class="publishPolicyBtn"
              @click="publishPolicy"
            >发布政策</div>
          </div>
        </div>
      </div>

    </div>
    <Spin
      size="large"
      fix
      v-if="spinShow"
    ></Spin>
  </div>
</template>

<script type="text/ecmascript-6">
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";

export default {
  name: "releasePolicy",
  data() {
    return {
      newWritable: [], //撰写新政策获取科室总数据
      Publisher: [], //转换好的科室数据结构
      SelectedId: [], //选中的id
      SelectedSteingId: "", //最后以这种格式传给后台
      pitchOn: "", //选中草稿箱政策显示保存时的信息

      classID: "", //科室ID
      classNameId: [], // 选中政策对应人员的id
      allUserList: [], //存科室负责人
      prizesObj: [
        // {
        //   id:'',
        //   title:'',
        //   description:'',
        //   maxPrize:''
        // }
      ], //资助数据
      issumIndexColor: false, //点击添加样式
      sumIndexRichText: "", //总索引页富文本内容
      ifClickPublish: false, //总索引的发布按钮值能发布一次
      switchover: false, //切换总索是否显示
      ispublish: false, //发布按钮
      isbackout: false, //撤消按钮
      isactiveALL: false, //强制改变草稿 li 不选草稿是的背景颜色
      policyDraftList: [], //草稿箱数据
      policyRecycleList: [], //回收站数据
      targetPolicyInfo: {}, //当前政策详情数据
      defaultList: [], //上传图片后默认保存图片的队列（详见iview文档）
      isShowPic: false, //展示上传后的图片
      isShowBtn: true, //展示上传图片的按钮
      isShowEditList: false, //控制展示编辑政策页面
      isShowPolicyList: true, //控制展示政策详情页面
      modal10: false, //控制展示添加资助的模态框
      spinShow: true, //控制展示loading动画
      newPolicyInfoTitle: "", //新建的政策标题内容
      picUrl: null, //上传的图片返回的服务器地址（用来控制展示或者删除）
      // vertical01: "wanyuan",
      // vertical02: "doNot",
      editorContent: "", //富文本编辑器的内容
      classId: null, //用来控制获取点击选项卡时的当前样式用
      editorOption: {
        modules: {
          toolbar: "#toolbar",
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          }
        }
      }, //富文本功能按钮
      policyLongTitle: "", //政策长标题
      policySpirit: "", //政策精神

      //  政策发布接口所需参数
      shortTitle: "", //政策短标题
      longTitle: "", //政策长标题
      bigPic: "", //政策图片地址
      spirit: "", //政策精神
      documentTitle: "", //政策文件（囊括了政策编辑的所有内容）
      prizesTitle: "", //资助标题
      prizesDescription: "", //资助描述
      prizesMaxPrize: "", //资助中的最高资助
      policyId: null, //政策id
      prizeType: "" //资助类型（后缀）
    };
  },
  props: [],
  components: {
    quillEditor //富文本编辑器组件
  },
  computed: {
    componentUrl() {
      return this._SERVER == 11812695244
        ? "http://118.126.95.244/admin"
        : this._SERVER == 120236189
        ? "http://120.236.1.89/admin"
        : "http://172.16.6.46/admin";
    }, //对应各个不同服务器所需要跳转的对应服务器组件库
    getToken() {
      "7c4a8d09ca3762af61e59520943dc26494f8941b";
    }, //上传图片需要的身份验证所对应不同服务器对应的不同的测试账号密码
    displayOffic() {
      return this.pitchOn == "" ? "请选择科室及相关人员" : this.pitchOn;
    }
  },
  methods: {
    //点击拿到所选中的科室负责人及相关人员
    publishData(value) {
      // console.log("初步拿到第一層數據");
      this.SelectedId = value;
      for (let v of this.Publisher) {
        if (value && value.length) {
          //拿到第一层点击到的ID
          if (value[0] == v.value) {
            //在第一层的时候，如果存在着valueID，说明有多个负责人，里边存的是其他负责人的id
            if (v.valueID && v.valueID.length) {
              for (let k = 0; k < v.valueID.length; k++) {
                this.SelectedId.push(v.valueID[k]);
              }
            }
            // console.log("第一步");
            // if (v.id == this.classID) {
            //   // console.log("第二步");
            //   if (v.children && v.children.length) {
            //     //选中科室下面的人员id
            //     let pitchOnId = [];
            //     // console.log("第三步");
            //     for (var a = 1; a <= value.length; a++) {
            //       // console.log("第四步");
            //       for (var k = 0; k < v.children.length; k++) {
            //         // console.log("第五步");
            //         if (value[a] == v.children[k].value) {
            //           // console.log("第六步要數據");
            //           pitchOnId.push(v.children[k].id);
            //         }
            //       }
            //     } //
            //     this.classNameId = pitchOnId;
            //   }
            // }
          }
        }
      } //
      //输出最终选中的id
      if (this.SelectedId != "") {
        this.SelectedId.push("");
        this.SelectedId.unshift("");
        this.SelectedSteingId = this.SelectedId.toString();
        // console.log(this.SelectedSteingId);
      }
    },

    //总索引页数据
    sumIndex() {
      this.issumIndexColor = true;
      this.isactiveALL = true;
      this.switchover = true;
      this.classId = null;
      this.ajaxData(
        {
          url: `/policy/indexContent`,
          type: "get",
          data: {}
        },
        res => {
          this.sumIndexRichText = res.content;
          // this.ifClickPublish = false
        }
      );
    },
    //索引页发布改动
    publishText() {
      // this.ifClickPublish = true
      this.ispublish = true;
      this.isbackout = false;
      this.ajaxData(
        {
          url: `/policy/saveIndexContent`,
          type: "post",
          data: {
            content: this.sumIndexRichText
          }
        },
        res => {
          alert("发布成功");
          // this.ifClickPublish = false
        }
      );
    },
    //索引页撤消改动
    backoutText() {
      // this.ifClickPublish = false,
      this.ispublish = false;
      this.isbackout = true;
      this.ajaxData(
        {
          url: `/policy/indexContent`,
          type: "get",
          data: {}
        },
        res => {
          this.sumIndexRichText = res.content;
        }
      );
    },

    //新建一个资助卡片
    addFunding() {
      this.modal10 = true;
      const unit = {
        id: "",
        title: "",
        description: "",
        maxPrize: ""
      };
      this.prizesObj.push(unit);
      // console.log(this.prizesObj);
    },
    //新建资助卡片时需要填写的资助类型的确认函数
    ok01() {
      this.prizeType = this.$refs.prizeTypeInfo.value;
      this.$Message.info("编辑完成");
    },
    //新建资助卡片时需要填写的资助类型的取消函数
    cancel01() {
      // console.log(this.prizeType);
      this.$Message.info("取消编辑");
    },
    //删除一个资助卡片的确认函数
    ok(fundingIndex) {
      // console.log(fundingIndex);
      this.prizesObj.splice(fundingIndex, 1);
      this.$Message.info("点击了确定");
    },
    //删除一个资助卡片的取消函数
    cancel() {
      this.$Message.info("点击了取消");
    },
    //  图片上传成功
    handleSuccess(file) {
      this.isShowPic = true;
      this.isShowBtn = false;
      this.picUrl = file.result.filePath;
    },
    //  删除图片
    deletePic(picUrl) {
      if (confirm("您确定删除这张图片吗？")) {
        this.isShowBtn = true;
        this.isShowPic = false;
        this.picUrl = "";
        this.$Message.info("照片删除成功");
      } else {
        this.$Message.info("取消删除照片");
      }
    },
    operation() {
      this.modal10 = false;
      this.modal11 = true;
    },
    //新建政策
    editPolicy() {
      this.Publisher = [];
      this.isShowPic = false;
      this.isShowBtn = true;
      this.issumIndexColor = false;
      this.switchover = false;
      this.picUrl = "";
      this.prizesObj = [];
      this.targetPolicyInfo = {};
      this.editorContent = "";
      this.isShowEditList = true;
      this.isShowPolicyList = false;
      this.ajaxData(
        {
          url: `/policy/getAllSectionUser`,
          type: "get",
          data: {}
        },
        res => {
          this.newWritable = res;
          // console.log(this.newWritable);
          if (this.newWritable != "") {
            this.cascaderNew(this.newWritable);
          }
        }
      );
    },
    //  保存正文草稿
    saveEditorContent() {
      this.shortTitle = this.$refs.shortTitleInfo.value || "";
      this.longTitle =
        this.policyLongTitle != ""
          ? this.policyLongTitle
          : this.$refs.longTitleInfo.value;
      this.bigPic = this.picUrl || "";
      this.spirit =
        this.policySpirit != ""
          ? this.policySpirit
          : this.$refs.spiritInfo.value;
      this.documentTitle = encodeURI(this.editorContent) || "";
      // if (this.SelectedSteingId == "") {
      //   this.$Notice.error({
      //     title: "错误",
      //     desc: "请选择政策相关人员"
      //   });
      //   return;
      // }
      this.ajaxData(
        {
          contentType: "json",
          type: "post",
          url: "/policy/save",
          data: {
            id: this.targetPolicyInfo.id ? this.targetPolicyInfo.id : "",
            shortTitle: this.shortTitle,
            longTitle: this.longTitle,
            bigPic: this.bigPic,
            spirit: this.spirit,
            userIds: this.SelectedSteingId, //选中的负责人及先关人员id
            document: [
              {
                id:
                  this.targetPolicyInfo.id && this.targetPolicyInfo.document
                    ? this.targetPolicyInfo.document[0].id
                    : "",
                title: this.documentTitle,
                type: "C",
                contentType: "B"
              }
            ],
            prizes: this.prizesObj
          }
        },
        (res, all) => {
          this.Publisher = []; //保存后清除结构
          this.getPolicyDraft();
          this.policyId = res;
          this.$Message.success("保存成功");
          // location.reload();
        }
      );
    },
    //  发布政策
    publishPolicy() {
      this.shortTitle = this.$refs.shortTitleInfo.value || "";
      this.longTitle =
        this.policyLongTitle != ""
          ? this.policyLongTitle
          : this.$refs.longTitleInfo.value;
      this.bigPic = this.picUrl || "";
      this.spirit =
        this.policySpirit != ""
          ? this.policySpirit
          : this.$refs.spiritInfo.value;
      this.documentTitle = encodeURI(this.editorContent) || "";
      // if (this.SelectedSteingId == "") {
      //   this.$Notice.error({
      //     title: "错误",
      //     desc: "请选择政策相关人员"
      //   });
      //   return;
      // }
      this.ajaxData(
        {
          contentType: "json",
          type: "post",
          url: "/policy/save",
          data: {
            id: this.targetPolicyInfo.id ? this.targetPolicyInfo.id : "",
            shortTitle: this.shortTitle,
            longTitle: this.longTitle,
            bigPic: this.bigPic,
            spirit: this.spirit,
            userIds: this.SelectedSteingId, //选中的负责人及先关人员id
            document: [
              {
                id:
                  this.targetPolicyInfo.id && this.targetPolicyInfo.document
                    ? this.targetPolicyInfo.document[0].id
                    : "",
                title: this.documentTitle,
                type: "C",
                contentType: "B"
              }
            ],
            prizes: this.prizesObj
          }
        },
        (res, all) => {
          // console.log("保存id");
          // console.log(this.SelectedSteingId);
          this.getPolicyDraft();
          this.policyId = res;
          if (this.targetPolicyInfo.id) {
            this.ajaxData(
              {
                type: "post",
                url: "/policy/publish",
                data: {
                  policyId: this.targetPolicyInfo.id
                }
              },
              (res, all) => {
                this.$Message.success("政策发布成功！");
                location.reload();
              }
            );
          } else {
            this.ajaxData(
              {
                contentType: "json",
                type: "post",
                url: "/policy/save",
                cache: false,
                async: false,
                data: {
                  id: this.targetPolicyInfo.id ? this.targetPolicyInfo.id : "",
                  shortTitle: this.shortTitle,
                  longTitle: this.longTitle,
                  bigPic: this.bigPic,
                  spirit: this.spirit,
                  document: [
                    {
                      id: this.targetPolicyInfo.id
                        ? this.targetPolicyInfo.document[0].id
                        : "",
                      title: this.documentTitle,
                      type: "C",
                      contentType: "B"
                    }
                  ],
                  prizes: this.prizesObj
                }
              },
              (res, all) => {
                this.policyId = res.id;
                this.ajaxData(
                  {
                    type: "post",
                    url: "/policy/publish",
                    data: {
                      policyId: this.policyId
                    }
                  },
                  (res, all) => {
                    this.$Message.success("政策发布成功！");
                    location.reload();
                  }
                );
              }
            );
          }
        }
      );
    },
    //  获取草稿
    getPolicyDraft() {
      this.spinShow = true;
      this.ajaxData(
        {
          type: "get",
          url: "/policy/page",
          data: { type: "D", pageSize: 100 }
        },
        (res, all) => {
          this.policyDraftList = res.results;
          // console.log(this.policyDraftList);
          if (this.policyDraftList != "") {
            //============替换成想要的数据====================
            if (this.policyDraftList.allUserList != "") {
              this.cascader(this.policyDraftList);
            }
            //============替换成想要的数据以上=================

            this.classId = this.policyDraftList[0].id;
            this.ajaxData(
              {
                type: "get",
                url: "/policy",
                data: { policyId: this.classId }
              },
              (res, all) => {
                this.targetPolicyInfo = res;
                this.prizesObj = res.prizes || [];
                this.editorContent = "";
                this.picUrl = res.bigPic;
                let str = "";
                if (res.document) {
                  if (res.document[0].title.match(/div/g)) {
                    for (let v of res.document) {
                      str += v.title + "\n\r";
                    }
                  } else {
                    for (let v of res.document) {
                      str += `<div>${v.title}</div>`;
                    }
                  }
                }
                this.editorContent = str;
                this.spinShow = false;
              }
            );
          }
        }
      );
    },
    //  获取回收站
    getPolicyRecycle() {
      this.spinShow = true;
      this.ajaxData(
        {
          type: "get",
          url: "/policy/page",
          data: { type: "R", pageSize: 100 }
        },
        (res, all) => {
          this.policyRecycleList = res.results;
          if (this.policyDraftList == "" && this.policyRecycleList != "") {
            this.classId = this.policyRecycleList[0].id;
            // console.log(this.classId);
            this.ajaxData(
              {
                type: "get",
                url: "/policy",
                data: { policyId: this.classId }
              },
              (res, all) => {
                this.targetPolicyInfo = res;
                this.prizesObj = res.prizes || [];
                this.editorContent = "";
                this.picUrl = res.bigPic;
                let str = "";
                if (res.document) {
                  if (res.document[0].title.match(/div/g)) {
                    for (let v of res.document) {
                      str += v.title + "\n\r";
                    }
                  } else {
                    for (let v of res.document) {
                      str += `<div>${v.title}</div>`;
                    }
                  }
                }
                this.editorContent = str;
                this.spinShow = false;
              }
            );
          } else if (
            this.policyDraftList == "" &&
            this.policyRecycleList == ""
          ) {
            setTimeout(() => {
              this.spinShow = false;
            }, 2500);
          }
        }
      );
    },
    //  获取当前点击的政策详情
    chooseTargetPolicy(id) {
      this.spirit = "";
      // console.log(this.spirit);
      this.switchover = false; //隐藏草稿的富文本，显示索引页的富文本
      this.issumIndexColor = false; //取消动态给 总索引页 添加的点击样式
      this.isactiveALL = false; //强制改变动态添加的样式
      this.spinShow = true;
      this.classId = id;
      this.isShowPolicyList = true;
      this.isShowEditList = false;
      let policyId = id;
      this.ajaxData(
        {
          type: "get",
          url: "/policy",
          data: { policyId: policyId }
        },
        (res, all) => {
          this.targetPolicyInfo = res;
          this.picUrl = res.bigPic;
          this.editorContent = "";
          this.prizesObj = res.prizes || [];
          this.picUrl = res.bigPic;
          let str = "";
          this.Publisher = []; //清除结构数组
          //=====选择或修改科室相关人员==============
          if (this.targetPolicyInfo != "") {
            //  console.dir(this.policyDraftList);
            if (this.targetPolicyInfo.sectionUsers) {
              this.pitchOn = this.targetPolicyInfo.sectionUsers;
            }
            this.cascader(this.policyDraftList);
          }
          //=======================================
          if (res.document) {
            if (res.document[0].title.match(/div/g)) {
              for (let v of res.document) {
                str += v.title + "\n\r";
              }
            } else {
              for (let v of res.document) {
                str += `<div>${v.title}</div>`;
              }
            }
          }
          this.editorContent = str;
          this.spinShow = false;
        }
      );
    },
    //  删除（下架）当前政策
    deleteDraft() {
      if (this.targetPolicyInfo.id) {
        this.ajaxData(
          {
            type: "post",
            url: "/policy/delete",
            data: {
              policyId: this.targetPolicyInfo.id
            }
          },
          res => {
            location.reload();
          }
        );
      }
    },

    //=====封装获取科室及负责人的方法==================
    cascader(userLead) {
      let arr = [];
      for (let v of userLead) {
        arr.push(v);
      }
      //不管有多少政策，值拿到一个allUserList,再对它为所欲为
      let arr2 = arr[0];
      if (arr2.allUserList && arr2.allUserList.length) {
        //1.将对象存于数组，针对数组单独操作，
        let keshi = [];
        //遍历出三个科室(目前是3个科室)
        for (let k of arr2.allUserList) {
          keshi.push(k);
        }
        //有的科室是1个负责人，有的是2个,对数组单独操作
        for (var i = 0; i < keshi.length; i++) {
          if (keshi[i].userLead && keshi[i].userLead.length) {
            // 一、操作科室负责人是1个的情况下
            if (keshi[i].userLead.length == 1) {
              let obj = {};
              let children = [];
              for (let k of keshi[i].userLead) {
                obj = {
                  value: k.id,
                  label: k.nickName
                };
                // 1-1. 添加children
                if (k.userList && k.userList.length) {
                  let childrenObj = {};
                  for (let v of k.userList) {
                    childrenObj = {
                      value: v.id,
                      label: v.realName,
                      multiple: true
                    };
                    children.push(childrenObj);
                    //往第一层添加子集
                    Object.assign(obj, { children: children });
                  }
                }
              }
              //添加到数据结构中去
              this.Publisher.push(obj);
            }
            // 二、操作科室负责人是多个的情况下
            if (keshi[i].userLead.length > 1) {
              let obj = {};
              let children = [];
              // 1.先操作第一个，因为科室名是一样，先保存科室名跟第一个负责人的id，
              let arr = keshi[i].userLead[0];
              //多负责人科室的外层数据
              obj = {
                value: arr.id,
                label: arr.nickName
              };
              //每个负责人的子集userLis都一样的，所以只拿一个userLis来遍历里边对应政策负责人就可以了
              if (arr.userList && arr.userList.length) {
                let childrenObj = {};
                for (let a = 0; a < arr.userList.length; a++) {
                  let childrenArr = arr.userList[a];
                  childrenObj = {
                    value: childrenArr.id,
                    label: childrenArr.realName,
                    multiple: true
                  };
                  //将子集每个对象添加到children数组中去
                  children.push(childrenObj);
                  //将children数组放到多负责人的科室对象去中去
                  Object.assign(obj, { children: children });
                }
              }

              // 2. 操作第二个开始的其他负责人，目的是取到它们的id并存在上面的对象中
              for (var s = 1; s < keshi[i].userLead.length; s++) {
                //  如果是多个负责人，分别遍历，做对比，把id存起来
                let valueID = [];
                let moreUserLead = keshi[i].userLead[s];
                valueID.push(moreUserLead.id);
                Object.assign(obj, { valueID: valueID });
              }
              // 3.将拥有多个负责人的科室添加到数据结构里边
              this.Publisher.push(obj);
            }
          }
        }
        // 三、输出最终的数据结构
        console.dir(this.Publisher);
      }
    },
    //======已经新接口封装科室及封装人方法==============
    cascaderNew(userLead) {
      if (userLead && userLead.length) {
        //1.将对象存于数组，针对数组单独操作，
        let keshi = [];
        //遍历出三个科室(目前是3个科室)
        for (let k of userLead) {
          keshi.push(k);
        }
        //有的科室是1个负责人，有的是2个,对数组单独操作
        for (var i = 0; i < keshi.length; i++) {
          if (keshi[i].userLead && keshi[i].userLead.length) {
            // 一、操作科室负责人是1个的情况下
            if (keshi[i].userLead.length == 1) {
              let obj = {};
              let children = [];
              for (let k of keshi[i].userLead) {
                obj = {
                  value: k.id,
                  label: k.nickName
                };
                // 1-1. 添加children
                if (k.userList && k.userList.length) {
                  let childrenObj = {};
                  for (let v of k.userList) {
                    childrenObj = {
                      value: v.id,
                      label: v.realName,
                      multiple: true
                    };
                    children.push(childrenObj);
                    //往第一层添加子集
                    Object.assign(obj, { children: children });
                  }
                }
              }
              //添加到数据结构中去
              this.Publisher.push(obj);
            }
            // 二、操作科室负责人是多个的情况下
            if (keshi[i].userLead.length > 1) {
              let obj = {};
              let children = [];
              // 1.先操作第一个，因为科室名是一样，先保存科室名跟第一个负责人的id，
              let arr = keshi[i].userLead[0];
              //多负责人科室的外层数据
              obj = {
                value: arr.id,
                label: arr.nickName
              };
              //每个负责人的子集userLis都一样的，所以只拿一个userLis来遍历里边对应政策负责人就可以了
              if (arr.userList && arr.userList.length) {
                let childrenObj = {};
                for (let a = 0; a < arr.userList.length; a++) {
                  let childrenArr = arr.userList[a];
                  childrenObj = {
                    value: childrenArr.id,
                    label: childrenArr.realName,
                    multiple: true
                  };
                  //将子集每个对象添加到children数组中去
                  children.push(childrenObj);
                  //将children数组放到多负责人的科室对象去中去
                  Object.assign(obj, { children: children });
                }
              }

              // 2. 操作第二个开始的其他负责人，目的是取到它们的id并存在上面的对象中
              for (var s = 1; s < keshi[i].userLead.length; s++) {
                //  如果是多个负责人，分别遍历，做对比，把id存起来
                let valueID = [];
                let moreUserLead = keshi[i].userLead[s];
                valueID.push(moreUserLead.id);
                Object.assign(obj, { valueID: valueID });
              }
              // 3.将拥有多个负责人的科室添加到数据结构里边
              this.Publisher.push(obj);
            }
          }
        }
        // 三、输出最终的数据结构
        console.dir(this.Publisher);
      }
    }
  },
  mounted() {},
  filters: {
    // 时间过滤器
    getStr(str) {
      if (str != null && str != "") {
        let regStr = /[\u4e00-\u9fa5]+/g;
        return str.match(regStr);
      }
    }
  },
  created() {
    this.getPolicyDraft(); //获取草稿箱数据
    this.getPolicyRecycle(); //获取回收站数据
  }
};
</script>
